<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        HIUI 前端页面框架 - 基础说明
    </title>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0 " name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="../../styles/hiui.css">
    <link rel="stylesheet" type="text/css" href="../../styles/site.css">

<body>
    
    <div class="site-header">
    <div class="site-container">
        <a class="logo">HIUI 前端框架</a>
    </div>
</div>
    <div class="site-container">
        <div class="site-tree">
            
<ul class="site-nav">
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">基础说明</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#start" class="site-nav-link">开始使用</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#module" class="site-nav-link">模块规范</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#issue" class="site-nav-link">常见问题</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/info.html#log" class="site-nav-link">更新日志</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">基础组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#normalize" class="site-nav-link">Normalize 排版</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#grid" class="site-nav-link">Grid 栅格系统</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#layout" class="site-nav-link">Layout 布局</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#font" class="site-nav-link">Font 字体图标</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#color" class="site-nav-link">Color 主题色彩</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#button" class="site-nav-link">Button 按钮</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#link" class="site-nav-link">Link 链接</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#animation" class="site-nav-link">Animation 动画</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#loading" class="site-nav-link">Loading CSS3 加载</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/base.html#assist" class="site-nav-link">Assist 辅助</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">表格</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#base" class="site-nav-link">Table 基础表格</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#responsive" class="site-nav-link">TableResponsive 数据表格</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/table.html#data" class="site-nav-link">DataTable 数据表格</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">表单组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#input" class="site-nav-link">Input 输入框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#select" class="site-nav-link">Select 选择框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#radio" class="site-nav-link">Radio 单选框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#checkbox" class="site-nav-link">Checkbox 多选框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#switch" class="site-nav-link">Switch 开关</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#autocomplete" class="site-nav-link">Autocomplete 自动完成</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#slider" class="site-nav-link">Slider 滑块</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#timepicker" class="site-nav-link">TimePicker 时间选择</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#rate" class="site-nav-link">Rate 评分</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#colorpicker" class="site-nav-link">ColorPicker 颜色选择器</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#inputnumber" class="site-nav-link">InputNumber 数字输入框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#cascader" class="site-nav-link">Cascader 级联选择</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/form.html#transfer" class="site-nav-link">Transfer 穿梭框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">视图组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#timeline" class="site-nav-link">Timeline 时间线</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#step" class="site-nav-link">Step 步骤条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tag" class="site-nav-link">Tag 标签</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tag" class="site-nav-link">Badge 徽标数</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#alert" class="site-nav-link">Alert 警告框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#avatar" class="site-nav-link">Avatar 头像</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#card" class="site-nav-link">Card 卡片</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#empty" class="site-nav-link">Empty 空状态</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#list" class="site-nav-link">List 列表</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#header" class="site-nav-link">Header 页头</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#article" class="site-nav-link">Article 文章</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#comment" class="site-nav-link">Comment 评论</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#skeleton" class="site-nav-link">Skeleton 骨架图</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#result" class="site-nav-link">Result 结果页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#divider" class="site-nav-link">Divider 分割线</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Progress 进度条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Tree 树形结构</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#progress" class="site-nav-link">Popover 气泡卡片</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#loadingbar" class="site-nav-link">LoadingBar 加载进度条</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#pagination" class="site-nav-link">Pagination 分页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#message" class="site-nav-link">Message 全局提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#notice" class="site-nav-link">Notice 通知提醒</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#dialog" class="site-nav-link">Dialog 模态框</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#collapse" class="site-nav-link">Collapse 折叠面板</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#tooltip" class="site-nav-link">Tooltip 文字提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#poptip" class="site-nav-link">Poptip 气泡提示</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/view.html#carousel" class="site-nav-link">Carousel 走马灯</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">导航组件</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#menu" class="site-nav-link">Menu 导航菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#dropdown" class="site-nav-link">Dropdown 下拉菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#tab" class="site-nav-link">Tab 标签页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#breadcrumb" class="site-nav-link">Breadcrumb 面包屑</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#aside" class="site-nav-link">Aside 左右模态框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">操作反馈</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#menu" class="site-nav-link">Menu 导航菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#dropdown" class="site-nav-link">Dropdown 下拉菜单</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#tab" class="site-nav-link">Tab 标签页</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#breadcrumb" class="site-nav-link">Breadcrumb 面包屑</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/nav.html#aside" class="site-nav-link">Aside 左右模态框</a>
    </li>
    
    
    <li class="site-nav-item">
        <h3 class="site-nav-title">其他</h3>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#affix" class="site-nav-link">Anchor 锚点</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#affix" class="site-nav-link">Affix 图钉</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#backtop" class="site-nav-link">BackTop 返回顶部</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#upload" class="site-nav-link">Upload 文件上传</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#validation" class="site-nav-link">Validation 表单验证</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#template" class="site-nav-link">Template 模版引擎</a>
    </li>
    
    <li class="site-nav-item">
        <a href="/modules/other.html#code" class="site-nav-link">Code 代码修饰器</a>
    </li>
    
    
</ul>
        </div>
        <div class="site-content">
            <h3 class="site-title">Normalize 排版<a name="normalize">#</a></h3>
             <h4 class="site-subtitle">1. 字体</h4>
<h5 class="site-thititle">1.1 字体定义<code>font</code></h5>
<div class="site-info">
    默认字体大小<code>14px</code>，行高<code>1.5</code>，字重400，字体颜色#444。
    <pre>
        <code>
font: 14px/1.56 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-weight: 400;
        </code>
    </pre>
</div>
<h5 class="site-thititle">1.2 Webkit 反锯齿</h5>
<div class="site-info">
    在 Webkit 浏览器下还设置了反锯齿平滑渲染，渲染出来要纤细一些，其他内核的浏览器上看着稍粗一些。
    <pre>
            <code>
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
            </code>
        </pre>
</div>
<h4 class="site-subtitle">2. 元素基本样式</h4>
<h5 class="site-thititle">2.1 标题 <code>h1</code>-<code>h6</code></h5>
<div class="site-info">
    标题字体大小未重置，内含外边距（顶部和底部）。
    <table class="site-table">
        <tbody>
            <tr>
                <td>
                    <div class="table-cell">
                        <h1><code>H1</code>标题 <small>尾巴</small></h1>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h2><code>H2</code>标题 <small>尾巴</small></h2>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h3><code>H3</code>标题 <small>尾巴</small></h3>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h4><code>H4</code>标题 <small>尾巴</small></h4>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h5><code>H5</code>标题 <small>尾巴</small></h5>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <h6><code>H6</code>标题 <small>尾巴</small></h6>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<h5 class="site-thititle">2.2 段落 <code>p</code></h5>
<div class="site-info">
    段落<code>p</code>字体大小未重置，内含外边距（顶部和底部）。
    <p>这是一个段落<br>这是一个段落<br></p>
    <p>这是另一个一个段落 <br> ...</p>
</div>
<h5 class="site-thititle">2.3 引用 <code>blockquote</code></h5>
<div class="site-info">
    <blockquote>
        <p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>
        <small>马尔克斯 <cite title="《百年孤独》">——《百年孤独》</cite></small>
    </blockquote>
</div>
<h5 class="site-thititle">2.4 列表 <code>ul</code> <code>ol</code> <code>dl</code></h5>
<div class="site-info">
    无序列表
    <ul>
        <li>条目：#1</li>
        <li>条目：#2
            <ul>
                <li>条目：#2.1</li>
                <li>条目：#2.2</li>
                <li>条目：#2.3
                    <ul>
                        <li>条目：#3.1</li>
                        <li>条目：#3.2</li>
                        <li>条目：#3.3</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>条目：#3</li>
        <li>条目：#4</li>
    </ul>
    有序列表
    <ol>
        <li>条目：#1</li>
        <li>条目：#2
            <ol>
                <li>条目：#2.1</li>
                <li>条目：#2.2</li>
                <li>条目：#2.3
                    <ol>
                        <li>条目：#3.1</li>
                        <li>条目：#3.2</li>
                        <li>条目：#3.3</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>条目：#3</li>
    </ol>
    描述
    <dl>
        <dt>列表描述1</dt>
        <dd>描述详情 1</dd>
        <dt>列表描述2</dt>
        <dd>描述详情 2</dd>
        <dt>列表描述3</dt>
        <dd>描述详情 3</dd>
    </dl>
</div>
<h5 class="site-thititle">2.5 表格 <code>table</code></h5>
<div class="site-info">
    <table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>表头 #1</th>
                <th>表头 #2</th>
                <th>表头 #3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据 #1</td>
                <td>数据 #2</td>
                <td>数据 #3</td>
            </tr>
            <tr>
                <td>数据 #1</td>
                <td>数据 #2</td>
                <td>数据 #3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表页脚 #1</td>
                <td>表页脚 #2</td>
                <td>表页脚 #3</td>
            </tr>
        </tfoot>
    </table>
</div>
<h5 class="site-thititle">2.6 其他元素</h5>
<div class="site-info">
    <table class="site-table">
        <thead>
            <tr>
                <th>元素</th>
                <th>基本样式</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;a&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <a>这是一个链接</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;em&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <em>斜体</em>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;strong&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <strong>着重</strong>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;small&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <small>小号文本</small>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;code&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <code>行内代码</code>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;ins&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <ins>插入文本</ins>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;q&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <q>我在 q 里面</q>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;mark&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <mark>我被贴上了 mark 标签</mark>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;del&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <del>被删除的文本</del>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;s&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <s>无用文本</s>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;dfn&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        定义一个东西<dfn>DLNA</dfn>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;abbr&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        缩略语 <abbr title="Internationalization">I18N</abbr>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;cite&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <cite>Citation</cite>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;i&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <i>Italic</i>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;kbd&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <kbd>Ctrl + S</kbd>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;ruby&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <ruby>汉<rt>han</rt>子<rt>zi</rt></ruby>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;samp&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <samp>Sample</samp>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;sup&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        Text<sup>Superscripted</sup>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="table-cell">
                        <code>&lt;u&gt;</code>
                    </div>
                </td>
                <td>
                    <div class="table-cell">
                        <u>带下划线的文本</u>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
            <h3 class="site-title">Grid 栅格系统<a name="grid">#</a></h3>
            <h5 class="site-subtitle">1. 容器 <code>.container-fluid</code> <code>.container</code></h5>
<div class="site-info">
    <code>.container-fluid</code>：100% 宽度的布局。<br>
    <code>.container</code>：宽度限定为 <code>1000px</code>并支持响应式布局的容器
</div>
<h5 class="site-subtitle">2. 基本使用</h5>
<div class="site-info">
    基本：
    <div class="row">
        <div class="col-6">
            <div class="site-mask">col-6</div>
        </div>
    </div>
    <div class="row">
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
        <div class="col-1">
            <div class="site-mask">col-1</div>
        </div>
        
    </div>
    <div class="row">
        <div class="col-4">
            <div class="site-mask">col-4</div>
        </div>
        <div class="col-8">
            <div class="site-mask">col-8</div>
        </div>
    </div>
    列偏移：
    <div class="row">
        <div class="col-10 col-offset-2">
            <div class="site-mask">col-10 col-offset-2</div>
        </div>
    </div>
    <div class="row">
        <div class="col-8 col-push-2">
            <div class="site-mask">col-8 col-push-2</div>
        </div>
        <div class="col-2">
            <div class="site-mask">col-2</div>
        </div>
    </div>
    响应式列：
    <div class="row">
        <div class="col-6 col-sm-4 col-md-2 col-lg-1">
            <div class="site-mask">col-4 col-sm-4 col-md-2 col-lg-1</div>
        </div>
        <div class="col-6 col-sm-8 col-md-10 col-lg-11">
            <div class="site-mask">col-6 col-sm-8 col-md-10 col-lg-11</div>
        </div>
    </div>
    <div class="row">
        <div class="col-10 col-sm-8 col-md-6 col-lg-4">
            <div class="site-mask">col-8 col-sm-6 col-md-4 col-lg-2</div>
        </div>
        <div class="col-2 col-sm-4 col-md-6 col-lg-8">
            <div class="site-mask">col-4 col-sm-6 col-md-8 col-lg-10</div>
        </div>
    </div>
    嵌套：
    <div class="row">
        <div class="col-3">
            <div class="site-mask">col-3</div>
        </div>
        <div class="col-9">
            <div class="row">
                <div class="col-6">
                    <div class="site-submask">col-6</div>
                </div>
                <div class="col-6">
                    <div class="site-submask">col-6</div>
                </div>
            </div>
        </div>
    </div>
</div>
            <h3 class="site-title">Layout 布局<a name="layout">#</a></h3>
            <h4 class="site-subtitle">1. 设计原则</h4>
<div class="site-info">
    1. 一级导航偏左靠近logo，辅助菜单偏右 <br>
    2. 顶部导航（大部分系统）：一级导航高度 <code>64px</code>，二级导航 <code>48px</code> <br>
    3. 顶部导航（展示类页面）：一级导航高度 <code>80px</code>，二级导航 <code>56px</code> <br>
    4. 布局容器 <code>.layout</code>，其下可嵌套 <code>.layout-head</code>，<code>.layout-sider</code>，<code>.layout-body</code>，<code>.layout-foot</code> 或 <code>.layout</code> 本身，可放在任何父容器中。
</div>
<h4 class="site-subtitle">2. 布局</h4>
<h5 class="site-thititle">2.1 上中下布局</h5>
<div class="site-info">
    <div class="layout">
        <div class="layout-head" style="height: 64px;line-height: 64px;background-color: #7dbcea;">顶部</div>
        <div class="layout-body" style="height: 120px;line-height: 120px;background-color: #108ee9">内容</div>
        <div class="layout-foot" style="height: 70px;line-height: 70px;background-color: #7dbcea;">底部</div>
    </div>
</div>
<h5 class="site-thititle">2.1 左中右布局</h5>
<div class="site-info">
    <p>栅格系统实现</p>
    <div class="layout">
        <div class="layout-head" style="height: 64px;line-height: 64px;background-color: #7dbcea;">顶部</div>
        <div class="layout-body" style="height: 200px;line-height: 200px;background-color: #108ee9">
            <div class="row">
                <div class="col-2" style="background-color: #108ee9;">左</div>
                <div class="col-8" style="background-color: #1faee9;">中</div>
                <div class="col-2" style="background-color: #908ee9;">右</div>
            </div>
        </div>
        <div class="layout-foot" style="height: 70px;line-height: 70px;background-color: #7dbcea;">底部</div>
    </div>
    <p>双飞翼布局实现</p>
    <div class="layout layout-has-side">
        <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
            <div class="layout-middle-inner">
                <div class="layout">
                    <div class="layout-head" style="height: 50px;line-height: 50px;background-color: #7dbcea;">顶部</div>
                    <div class="layout-body" style="height: 100px;line-height: 100px;background-color: #108ee9">内容</div>
                    <div class="layout-foot" style="height: 50px;line-height: 50px;background-color: #7dbcea;">底部</div>
                </div>
            </div>
        </div>
        <div class="layout-left" style="height: 200px;line-height: 200px;background-color: #3ba0e9;">左侧边</div>
        <div class="layout-right" style="height: 200px;line-height: 200px;background-color: #4f92e9;">右侧边</div>
    </div>
    <p>双飞翼布局嵌套实现</p>
    <div class="layout layout-has-side">
        <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
            <div class="layout-middle-inner">
                <div class="layout layout-has-side">
                    <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
                        <div class="layout-middle-inner">
                            <div class="layout">
                                <div class="layout-head" style="height: 50px;line-height: 50px;background-color: #7dbcea;">顶部</div>
                                <div class="layout-body" style="height: 100px;line-height: 100px;background-color: #108ee9">内容</div>
                                <div class="layout-foot" style="height: 50px;line-height: 50px;background-color: #7dbcea;">底部</div>
                            </div>
                        </div>
                    </div>
                    <div class="layout-left" style="height: 200px;line-height: 200px;background-color: #3ba0e9;">内容左</div>
                    <div class="layout-right" style="height: 200px;line-height: 200px;background-color: #4f92e9;">内容右</div>
                </div>
            </div>
        </div>
        <div class="layout-left" style="height: 200px;line-height: 200px;background-color: #3ba0e9;">左侧边</div>
        <div class="layout-right" style="height: 200px;line-height: 200px;background-color: #4f92e9;">右侧边</div>
    </div>
</div>
 <h5 class="site-thititle">2.3. 侧边布局</h5>
<div class="site-info">
    <p>左侧边</p>
    <div class="layout layout-has-side">
        <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
            <div class="layout-middle-inner">
                <div class="layout">
                    <div class="layout-head" style="height: 50px;line-height: 50px;background-color: #7dbcea;">顶部</div>
                    <div class="layout-body" style="height: 100px;line-height: 100px;background-color: #108ee9">内容</div>
                    <div class="layout-foot" style="height: 50px;line-height: 50px;background-color: #7dbcea;">底部</div>
                </div>
            </div>
        </div>
        <div class="layout-left" style="width: 200px;height: 200px;line-height: 200px;background-color: #3ba0e9;">侧边</div>
    </div>
    <p>右侧边</p>
    <div class="layout layout-has-side">
        <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
            <div class="layout-middle-inner">
                <div class="layout">
                    <div class="layout-head" style="height: 50px;line-height: 50px;background-color: #7dbcea;">顶部</div>
                    <div class="layout-body" style="height: 100px;line-height: 100px;background-color: #108ee9">内容</div>
                    <div class="layout-foot" style="height: 50px;line-height: 50px;background-color: #7dbcea;">底部</div>
                </div>
            </div>
        </div>
        <div class="layout-right" style="height: 200px;line-height: 200px;background-color: #4f92e9;">右侧边</div>
    </div>
</div>
            <h3 class="site-title">Font 字体图标<a name="font">#</a></h3>
            <h4 class="site-thititle">1. 方向性图标</h4>
<div class="site-info">
    <ul class="icons-list">
        
        
        <li class="icon-item">
            <i class="hiicon hiicon-step-backward"></i>
            <span class="icon-badge">
                step-backward</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-step-forward"></i>
            <span class="icon-badge">
                step-forward</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fast-backward"></i>
            <span class="icon-badge">
                fast-backward</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fast-forward"></i>
            <span class="icon-badge">
                fast-forward</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-shrink"></i>
            <span class="icon-badge">
                shrink</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-arrawsalt"></i>
            <span class="icon-badge">
                arrawsalt</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-down"></i>
            <span class="icon-badge">
                down</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-up"></i>
            <span class="icon-badge">
                up</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-left"></i>
            <span class="icon-badge">
                left</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-right"></i>
            <span class="icon-badge">
                right</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-caret-up"></i>
            <span class="icon-badge">
                caret-up</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-caret-down"></i>
            <span class="icon-badge">
                caret-down</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-caret-left"></i>
            <span class="icon-badge">
                caret-left</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-caret-right"></i>
            <span class="icon-badge">
                caret-right</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-up-circle"></i>
            <span class="icon-badge">
                up-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-down-circle"></i>
            <span class="icon-badge">
                down-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-left-circle"></i>
            <span class="icon-badge">
                left-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-right-circle"></i>
            <span class="icon-badge">
                right-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-verticalleft"></i>
            <span class="icon-badge">
                verticalleft</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-verticalright"></i>
            <span class="icon-badge">
                verticalright</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-doubleright"></i>
            <span class="icon-badge">
                doubleright</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-doubleleft"></i>
            <span class="icon-badge">
                doubleleft</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-forward"></i>
            <span class="icon-badge">
                forward</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-backward"></i>
            <span class="icon-badge">
                backward</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-rollback"></i>
            <span class="icon-badge">
                rollback</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-enter"></i>
            <span class="icon-badge">
                enter</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-retweet"></i>
            <span class="icon-badge">
                retweet</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-swap"></i>
            <span class="icon-badge">
                swap</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-swap-left"></i>
            <span class="icon-badge">
                swap-left</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-swap-right"></i>
            <span class="icon-badge">
                swap-right</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-arrowup"></i>
            <span class="icon-badge">
                arrowup</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-arrowdown"></i>
            <span class="icon-badge">
                arrowdown</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-arrowleft"></i>
            <span class="icon-badge">
                arrowleft</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-arrowright"></i>
            <span class="icon-badge">
                arrowright</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-play-circle"></i>
            <span class="icon-badge">
                play-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-up-square"></i>
            <span class="icon-badge">
                up-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-down-square"></i>
            <span class="icon-badge">
                down-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-left-square"></i>
            <span class="icon-badge">
                left-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-right-square"></i>
            <span class="icon-badge">
                right-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-login"></i>
            <span class="icon-badge">
                login</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-logout"></i>
            <span class="icon-badge">
                logout</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-indent"></i>
            <span class="icon-badge">
                indent</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-outdent"></i>
            <span class="icon-badge">
                outdent</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-border-bottom"></i>
            <span class="icon-badge">
                border-bottom</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-border-horizontal"></i>
            <span class="icon-badge">
                border-horizontal</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-border-inner"></i>
            <span class="icon-badge">
                border-inner</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-border-left"></i>
            <span class="icon-badge">
                border-left</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-border-right"></i>
            <span class="icon-badge">
                border-right</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-border-top"></i>
            <span class="icon-badge">
                border-top</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-border-verticle"></i>
            <span class="icon-badge">
                border-verticle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-pic-center"></i>
            <span class="icon-badge">
                pic-center</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-pic-left"></i>
            <span class="icon-badge">
                pic-left</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-pic-right"></i>
            <span class="icon-badge">
                pic-right</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-radius-bottomleft"></i>
            <span class="icon-badge">
                radius-bottomleft</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-radius-bottomright"></i>
            <span class="icon-badge">
                radius-bottomright</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-radius-upleft"></i>
            <span class="icon-badge">
                radius-upleft</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fullscreen"></i>
            <span class="icon-badge">
                fullscreen</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fullscreen-exit"></i>
            <span class="icon-badge">
                fullscreen-exit</span>
        </li>
        
    </ul>
</div>
<h4 class="site-thititle">2. 提示建议性图标</h4>
<div class="site-info">
    <ul class="icons-list">
        
        
        <li class="icon-item">
            <i class="hiicon hiicon-question"></i>
            <span class="icon-badge">
                question</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-question-circle"></i>
            <span class="icon-badge">
                question-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-plus"></i>
            <span class="icon-badge">
                plus</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-plus-circle"></i>
            <span class="icon-badge">
                plus-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-pause"></i>
            <span class="icon-badge">
                pause</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-timeout"></i>
            <span class="icon-badge">
                timeout</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-minus"></i>
            <span class="icon-badge">
                minus</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-minus-circle"></i>
            <span class="icon-badge">
                minus-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-plus-square"></i>
            <span class="icon-badge">
                plus-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-minus-square"></i>
            <span class="icon-badge">
                minus-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-infomation"></i>
            <span class="icon-badge">
                infomation</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-info-circle"></i>
            <span class="icon-badge">
                info-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-exclaimination"></i>
            <span class="icon-badge">
                exclaimination</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-info-circle"></i>
            <span class="icon-badge">
                info-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-close"></i>
            <span class="icon-badge">
                close</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-close-circle"></i>
            <span class="icon-badge">
                close-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-close-square"></i>
            <span class="icon-badge">
                close-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-check"></i>
            <span class="icon-badge">
                check</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-check-circle"></i>
            <span class="icon-badge">
                check-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-check-square"></i>
            <span class="icon-badge">
                check-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-time-circle"></i>
            <span class="icon-badge">
                time-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-warning-circle"></i>
            <span class="icon-badge">
                warning-circle</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-issuesclose"></i>
            <span class="icon-badge">
                issuesclose</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-stop"></i>
            <span class="icon-badge">
                stop</span>
        </li>
        
    </ul>
</div>
<h4 class="site-thititle">3. 编辑类图标</h4>
<div class="site-info">
    <ul class="icons-list">
        
        
        <li class="icon-item">
            <i class="hiicon hiicon-edit"></i>
            <span class="icon-badge">
                edit</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-edit-square"></i>
            <span class="icon-badge">
                edit-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-copy"></i>
            <span class="icon-badge">
                file-copy</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-scissor"></i>
            <span class="icon-badge">
                scissor</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-delete"></i>
            <span class="icon-badge">
                delete</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-snippets"></i>
            <span class="icon-badge">
                snippets</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-diff"></i>
            <span class="icon-badge">
                diff</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-highlight"></i>
            <span class="icon-badge">
                highlight</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-align-center"></i>
            <span class="icon-badge">
                align-center</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-align-left"></i>
            <span class="icon-badge">
                align-left</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-align-right"></i>
            <span class="icon-badge">
                align-right</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-bg-colors"></i>
            <span class="icon-badge">
                bg-colors</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-bold"></i>
            <span class="icon-badge">
                bold</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-italic"></i>
            <span class="icon-badge">
                italic</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-underline"></i>
            <span class="icon-badge">
                underline</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-strikethrough"></i>
            <span class="icon-badge">
                strikethrough</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-redo"></i>
            <span class="icon-badge">
                redo</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-undo"></i>
            <span class="icon-badge">
                undo</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-zoomin"></i>
            <span class="icon-badge">
                zoomin</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-zoomout"></i>
            <span class="icon-badge">
                zoomout</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-font-colors"></i>
            <span class="icon-badge">
                font-colors</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-font-size"></i>
            <span class="icon-badge">
                font-size</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-line-height"></i>
            <span class="icon-badge">
                line-height</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-dash"></i>
            <span class="icon-badge">
                dash</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-small-dash"></i>
            <span class="icon-badge">
                small-dash</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-sort-ascending"></i>
            <span class="icon-badge">
                sort-ascending</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-sort-descending"></i>
            <span class="icon-badge">
                sort-descending</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-drag"></i>
            <span class="icon-badge">
                drag</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-radius-setting"></i>
            <span class="icon-badge">
                radius-setting</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-column-width"></i>
            <span class="icon-badge">
                column-width</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-column-height"></i>
            <span class="icon-badge">
                column-height</span>
        </li>
        
    </ul>
</div>
<h4 class="site-thititle">4. 数据类图标</h4>
<div class="site-info">
    <ul class="icons-list">
        
        
        <li class="icon-item">
            <i class="hiicon hiicon-areachart"></i>
            <span class="icon-badge">
                areachart</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-piechart"></i>
            <span class="icon-badge">
                piechart</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-barchart"></i>
            <span class="icon-badge">
                barchart</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-pointmap"></i>
            <span class="icon-badge">
                pointmap</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-linechart"></i>
            <span class="icon-badge">
                linechart</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-radarchart"></i>
            <span class="icon-badge">
                radarchart</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-heatmap"></i>
            <span class="icon-badge">
                heatmap</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fall"></i>
            <span class="icon-badge">
                fall</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-rise"></i>
            <span class="icon-badge">
                rise</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-stock"></i>
            <span class="icon-badge">
                stock</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-boxplot"></i>
            <span class="icon-badge">
                boxplot</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fund"></i>
            <span class="icon-badge">
                fund</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-sliders"></i>
            <span class="icon-badge">
                sliders</span>
        </li>
        
    </ul>
</div>
<h4 class="site-thititle">5. 网站通用图标</h4>
<div class="site-info">
    <ul class="icons-list">
        
        
        <li class="icon-item">
            <i class="hiicon hiicon-accountbook"></i>
            <span class="icon-badge">
                accountbook</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-aim"></i>
            <span class="icon-badge">
                aim</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-alert"></i>
            <span class="icon-badge">
                alert</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-apartment"></i>
            <span class="icon-badge">
                apartment</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-api"></i>
            <span class="icon-badge">
                api</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-appstoreadd"></i>
            <span class="icon-badge">
                appstoreadd</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-appstore"></i>
            <span class="icon-badge">
                appstore</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-audio"></i>
            <span class="icon-badge">
                audio</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-audiostatic"></i>
            <span class="icon-badge">
                audiostatic</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-audit"></i>
            <span class="icon-badge">
                audit</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-bank"></i>
            <span class="icon-badge">
                bank</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-barcode"></i>
            <span class="icon-badge">
                barcode</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-unorderedlist"></i>
            <span class="icon-badge">
                unorderedlist</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-bell"></i>
            <span class="icon-badge">
                bell</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-block"></i>
            <span class="icon-badge">
                block</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-book"></i>
            <span class="icon-badge">
                book</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-border"></i>
            <span class="icon-badge">
                border</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-table1"></i>
            <span class="icon-badge">
                table1</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-branches"></i>
            <span class="icon-badge">
                branches</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-bug"></i>
            <span class="icon-badge">
                bug</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-build"></i>
            <span class="icon-badge">
                build</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-bulb"></i>
            <span class="icon-badge">
                bulb</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-calculator"></i>
            <span class="icon-badge">
                calculator</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-calendar"></i>
            <span class="icon-badge">
                calendar</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-camera"></i>
            <span class="icon-badge">
                camera</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-car"></i>
            <span class="icon-badge">
                car</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-carryout"></i>
            <span class="icon-badge">
                carryout</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-ci"></i>
            <span class="icon-badge">
                ci</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-clear"></i>
            <span class="icon-badge">
                clear</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-cloud-download"></i>
            <span class="icon-badge">
                cloud-download</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-cloud"></i>
            <span class="icon-badge">
                cloud</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-cloud-server"></i>
            <span class="icon-badge">
                cloud-server</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-cloud-sync"></i>
            <span class="icon-badge">
                cloud-sync</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-cloud-upload"></i>
            <span class="icon-badge">
                cloud-upload</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-cluster"></i>
            <span class="icon-badge">
                cluster</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-comment"></i>
            <span class="icon-badge">
                comment</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-compass"></i>
            <span class="icon-badge">
                compass</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-console-sql"></i>
            <span class="icon-badge">
                console-sql</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-contacts"></i>
            <span class="icon-badge">
                contacts</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-container"></i>
            <span class="icon-badge">
                container</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-control"></i>
            <span class="icon-badge">
                control</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-copyright"></i>
            <span class="icon-badge">
                copyright</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-creditcard"></i>
            <span class="icon-badge">
                creditcard</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-crown"></i>
            <span class="icon-badge">
                crown</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-customerservice"></i>
            <span class="icon-badge">
                customerservice</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-dashboard"></i>
            <span class="icon-badge">
                dashboard</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-database"></i>
            <span class="icon-badge">
                database</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-deletecolumn"></i>
            <span class="icon-badge">
                deletecolumn</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-deleterow"></i>
            <span class="icon-badge">
                deleterow</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-deploymentunit"></i>
            <span class="icon-badge">
                deploymentunit</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-desktop"></i>
            <span class="icon-badge">
                desktop</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-disconnect"></i>
            <span class="icon-badge">
                disconnect</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-like"></i>
            <span class="icon-badge">
                like</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-unlike"></i>
            <span class="icon-badge">
                unlike</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-dollar"></i>
            <span class="icon-badge">
                dollar</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-download"></i>
            <span class="icon-badge">
                download</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-ellipsis"></i>
            <span class="icon-badge">
                ellipsis</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-location"></i>
            <span class="icon-badge">
                location</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-euro"></i>
            <span class="icon-badge">
                euro</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-exception"></i>
            <span class="icon-badge">
                file-exception</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-experiment"></i>
            <span class="icon-badge">
                experiment</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-export"></i>
            <span class="icon-badge">
                export</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-eye"></i>
            <span class="icon-badge">
                eye</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-eye-close"></i>
            <span class="icon-badge">
                eye-close</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-field-binary"></i>
            <span class="icon-badge">
                field-binary</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-field-number"></i>
            <span class="icon-badge">
                field-number</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-field-string"></i>
            <span class="icon-badge">
                field-string</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-field-time"></i>
            <span class="icon-badge">
                field-time</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-add"></i>
            <span class="icon-badge">
                file-add</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-filedone"></i>
            <span class="icon-badge">
                filedone</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-excel"></i>
            <span class="icon-badge">
                file-excel</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-exclamation"></i>
            <span class="icon-badge">
                file-exclamation</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file"></i>
            <span class="icon-badge">
                file</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-gif"></i>
            <span class="icon-badge">
                file-gif</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-image"></i>
            <span class="icon-badge">
                file-image</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-markdown"></i>
            <span class="icon-badge">
                file-markdown</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-pdf"></i>
            <span class="icon-badge">
                file-pdf</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-ppt"></i>
            <span class="icon-badge">
                file-ppt</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fileprotect"></i>
            <span class="icon-badge">
                fileprotect</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-filesearch"></i>
            <span class="icon-badge">
                filesearch</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-filesync"></i>
            <span class="icon-badge">
                filesync</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-text"></i>
            <span class="icon-badge">
                file-text</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-unknown"></i>
            <span class="icon-badge">
                file-unknown</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-word"></i>
            <span class="icon-badge">
                file-word</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-file-zip"></i>
            <span class="icon-badge">
                file-zip</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-filter"></i>
            <span class="icon-badge">
                filter</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fire"></i>
            <span class="icon-badge">
                fire</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-flag"></i>
            <span class="icon-badge">
                flag</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-folder-add"></i>
            <span class="icon-badge">
                folder-add</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-folder"></i>
            <span class="icon-badge">
                folder</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-folder-open"></i>
            <span class="icon-badge">
                folder-open</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-folder-view"></i>
            <span class="icon-badge">
                folder-view</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fork"></i>
            <span class="icon-badge">
                fork</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-formatpainter"></i>
            <span class="icon-badge">
                formatpainter</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-frown"></i>
            <span class="icon-badge">
                frown</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-function"></i>
            <span class="icon-badge">
                function</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-fund"></i>
            <span class="icon-badge">
                fund</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-view"></i>
            <span class="icon-badge">
                view</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-gateway"></i>
            <span class="icon-badge">
                gateway</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-gif"></i>
            <span class="icon-badge">
                gif</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-gift"></i>
            <span class="icon-badge">
                gift</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-earth"></i>
            <span class="icon-badge">
                earth</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-gold"></i>
            <span class="icon-badge">
                gold</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-group"></i>
            <span class="icon-badge">
                group</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-database"></i>
            <span class="icon-badge">
                database</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-heart"></i>
            <span class="icon-badge">
                heart</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-reloadtime"></i>
            <span class="icon-badge">
                reloadtime</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-home"></i>
            <span class="icon-badge">
                home</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-hourglass"></i>
            <span class="icon-badge">
                hourglass</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-idcard"></i>
            <span class="icon-badge">
                idcard</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-import"></i>
            <span class="icon-badge">
                import</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-insertrowbelow"></i>
            <span class="icon-badge">
                insertrowbelow</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-insertrowabove"></i>
            <span class="icon-badge">
                insertrowabove</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-insertrowleft"></i>
            <span class="icon-badge">
                insertrowleft</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-insertrowright"></i>
            <span class="icon-badge">
                insertrowright</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-insurance"></i>
            <span class="icon-badge">
                insurance</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-interation"></i>
            <span class="icon-badge">
                interation</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-key"></i>
            <span class="icon-badge">
                key</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-laptop"></i>
            <span class="icon-badge">
                laptop</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-layout"></i>
            <span class="icon-badge">
                layout</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-line"></i>
            <span class="icon-badge">
                line</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-link"></i>
            <span class="icon-badge">
                link</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-reload"></i>
            <span class="icon-badge">
                reload</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-lock"></i>
            <span class="icon-badge">
                lock</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-mail"></i>
            <span class="icon-badge">
                mail</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-man"></i>
            <span class="icon-badge">
                man</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-woman"></i>
            <span class="icon-badge">
                woman</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-medicinebox"></i>
            <span class="icon-badge">
                medicinebox</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-meh"></i>
            <span class="icon-badge">
                meh</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-menu"></i>
            <span class="icon-badge">
                menu</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-merge-cells"></i>
            <span class="icon-badge">
                merge-cells</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-message"></i>
            <span class="icon-badge">
                message</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-mobile"></i>
            <span class="icon-badge">
                mobile</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-moneycollect"></i>
            <span class="icon-badge">
                moneycollect</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-monitor"></i>
            <span class="icon-badge">
                monitor</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-compress"></i>
            <span class="icon-badge">
                compress</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-expend"></i>
            <span class="icon-badge">
                expend</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-collapse"></i>
            <span class="icon-badge">
                collapse</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-expand"></i>
            <span class="icon-badge">
                expand</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-index"></i>
            <span class="icon-badge">
                index</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-notification"></i>
            <span class="icon-badge">
                notification</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-number"></i>
            <span class="icon-badge">
                number</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-onetoone"></i>
            <span class="icon-badge">
                onetoone</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-link"></i>
            <span class="icon-badge">
                link</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-apartment"></i>
            <span class="icon-badge">
                apartment</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-yuan"></i>
            <span class="icon-badge">
                yuan</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-percentage"></i>
            <span class="icon-badge">
                percentage</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-phone"></i>
            <span class="icon-badge">
                phone</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-image"></i>
            <span class="icon-badge">
                image</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-play-square"></i>
            <span class="icon-badge">
                play-square</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-pound"></i>
            <span class="icon-badge">
                pound</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-poweroff"></i>
            <span class="icon-badge">
                poweroff</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-printer"></i>
            <span class="icon-badge">
                printer</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-project"></i>
            <span class="icon-badge">
                project</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-propertysafety"></i>
            <span class="icon-badge">
                propertysafety</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-pushpin"></i>
            <span class="icon-badge">
                pushpin</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-qrcode"></i>
            <span class="icon-badge">
                qrcode</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-read"></i>
            <span class="icon-badge">
                read</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-reconciliation"></i>
            <span class="icon-badge">
                reconciliation</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-redenvelope"></i>
            <span class="icon-badge">
                redenvelope</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-reload"></i>
            <span class="icon-badge">
                reload</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-rest"></i>
            <span class="icon-badge">
                rest</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-robot"></i>
            <span class="icon-badge">
                robot</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-rocket"></i>
            <span class="icon-badge">
                rocket</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-rotate-left"></i>
            <span class="icon-badge">
                rotate-left</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-rotate-right"></i>
            <span class="icon-badge">
                rotate-right</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-safetycertificate"></i>
            <span class="icon-badge">
                safetycertificate</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-save"></i>
            <span class="icon-badge">
                save</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-scan"></i>
            <span class="icon-badge">
                scan</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-securityscan"></i>
            <span class="icon-badge">
                securityscan</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-search"></i>
            <span class="icon-badge">
                search</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-select"></i>
            <span class="icon-badge">
                select</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-send"></i>
            <span class="icon-badge">
                send</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-setting"></i>
            <span class="icon-badge">
                setting</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-shake"></i>
            <span class="icon-badge">
                shake</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-share"></i>
            <span class="icon-badge">
                share</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-shop"></i>
            <span class="icon-badge">
                shop</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-shopping"></i>
            <span class="icon-badge">
                shopping</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-sisternode"></i>
            <span class="icon-badge">
                sisternode</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-skin"></i>
            <span class="icon-badge">
                skin</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-smile"></i>
            <span class="icon-badge">
                smile</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-solution"></i>
            <span class="icon-badge">
                solution</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-sound"></i>
            <span class="icon-badge">
                sound</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-star"></i>
            <span class="icon-badge">
                star</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-subnode"></i>
            <span class="icon-badge">
                subnode</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-sync"></i>
            <span class="icon-badge">
                sync</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-table"></i>
            <span class="icon-badge">
                table</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-tablet"></i>
            <span class="icon-badge">
                tablet</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-tag"></i>
            <span class="icon-badge">
                tag</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-tags"></i>
            <span class="icon-badge">
                tags</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-team"></i>
            <span class="icon-badge">
                team</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-thunderbolt"></i>
            <span class="icon-badge">
                thunderbolt</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-totop"></i>
            <span class="icon-badge">
                totop</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-trademark"></i>
            <span class="icon-badge">
                trademark</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-transaction"></i>
            <span class="icon-badge">
                transaction</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-translate"></i>
            <span class="icon-badge">
                translate</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-trophy"></i>
            <span class="icon-badge">
                trophy</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-ungroup"></i>
            <span class="icon-badge">
                ungroup</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-unlock"></i>
            <span class="icon-badge">
                unlock</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-upload"></i>
            <span class="icon-badge">
                upload</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-usb"></i>
            <span class="icon-badge">
                usb</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-adduser"></i>
            <span class="icon-badge">
                adduser</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-deleteuser"></i>
            <span class="icon-badge">
                deleteuser</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-user"></i>
            <span class="icon-badge">
                user</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-switchuser"></i>
            <span class="icon-badge">
                switchuser</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-addteam"></i>
            <span class="icon-badge">
                addteam</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-deleteteam"></i>
            <span class="icon-badge">
                deleteteam</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-team"></i>
            <span class="icon-badge">
                team</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-verified"></i>
            <span class="icon-badge">
                verified</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-video"></i>
            <span class="icon-badge">
                video</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-videocameraadd"></i>
            <span class="icon-badge">
                videocameraadd</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-wallet"></i>
            <span class="icon-badge">
                wallet</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-whatsapp"></i>
            <span class="icon-badge">
                whatsapp</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-wifi"></i>
            <span class="icon-badge">
                wifi</span>
        </li>
        
    </ul>
</div>
<h4 class="site-thititle">6. 品牌和标识</h4>
<div class="site-info">
    <ul class="icons-list">
        
        
        <li class="icon-item">
            <i class="hiicon hiicon-android"></i>
            <span class="icon-badge">
                android</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-apple"></i>
            <span class="icon-badge">
                apple</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-windows"></i>
            <span class="icon-badge">
                windows</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-ie"></i>
            <span class="icon-badge">
                ie</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-chrome"></i>
            <span class="icon-badge">
                chrome</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-github-fill"></i>
            <span class="icon-badge">
                github-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-aliwangwang"></i>
            <span class="icon-badge">
                aliwangwang</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-dingtalk"></i>
            <span class="icon-badge">
                dingtalk</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-weibo-square-fill"></i>
            <span class="icon-badge">
                weibo-square-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-weibo-circle-fill"></i>
            <span class="icon-badge">
                weibo-circle-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-taobao-circle-fill"></i>
            <span class="icon-badge">
                taobao-circle-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-html"></i>
            <span class="icon-badge">
                html</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-weibo"></i>
            <span class="icon-badge">
                weibo</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-twitter"></i>
            <span class="icon-badge">
                twitter</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-wechat-fill"></i>
            <span class="icon-badge">
                wechat-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-youtube"></i>
            <span class="icon-badge">
                youtube</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-alipay-circle-fill"></i>
            <span class="icon-badge">
                alipay-circle-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-taobao"></i>
            <span class="icon-badge">
                taobao</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-skype"></i>
            <span class="icon-badge">
                skype</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-qq"></i>
            <span class="icon-badge">
                qq</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-gitlab"></i>
            <span class="icon-badge">
                gitlab</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-medium"></i>
            <span class="icon-badge">
                medium</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-linkedin"></i>
            <span class="icon-badge">
                linkedin</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-googleplus"></i>
            <span class="icon-badge">
                googleplus</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-dropbox"></i>
            <span class="icon-badge">
                dropbox</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-facebook"></i>
            <span class="icon-badge">
                facebook</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-codepen"></i>
            <span class="icon-badge">
                codepen</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-amazon"></i>
            <span class="icon-badge">
                amazon</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-google"></i>
            <span class="icon-badge">
                google</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-codepen-circle-fill"></i>
            <span class="icon-badge">
                codepen-circle-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-alipay"></i>
            <span class="icon-badge">
                alipay</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-antdesign"></i>
            <span class="icon-badge">
                antdesign</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-ant-cloud"></i>
            <span class="icon-badge">
                ant-cloud</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-alibabacloud"></i>
            <span class="icon-badge">
                alibabacloud</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-zhihu"></i>
            <span class="icon-badge">
                zhihu</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-slack"></i>
            <span class="icon-badge">
                slack</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-slack-square-fill"></i>
            <span class="icon-badge">
                slack-square-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-behance"></i>
            <span class="icon-badge">
                behance</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-behance-square-fill"></i>
            <span class="icon-badge">
                behance-square-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-dribbble"></i>
            <span class="icon-badge">
                dribbble</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-dribbble-square-fill"></i>
            <span class="icon-badge">
                dribbble-square-fill</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-instagram"></i>
            <span class="icon-badge">
                instagram</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-yuque"></i>
            <span class="icon-badge">
                yuque</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-alibaba"></i>
            <span class="icon-badge">
                alibaba</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-yahoo"></i>
            <span class="icon-badge">
                yahoo</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-reddit"></i>
            <span class="icon-badge">
                reddit</span>
        </li>
        
        <li class="icon-item">
            <i class="hiicon hiicon-sketch"></i>
            <span class="icon-badge">
                sketch</span>
        </li>
        
    </ul>
</div>
<h4 class="site-thititle">7. Spin 加载中</h4>
<div class="site-info">
    <span class="hiicon hiicon-setting hiicon-spin text-primary" style="font-size:30px;margin-right:30px;"></span>
    <span class="hiicon hiicon-reload hiicon-spin text-primary" style="font-size:30px;margin-right:30px;"></span>
    <span class="hiicon hiicon-redo hiicon-spin text-primary" style="font-size:30px;margin-right:30px;"></span>
    <span class="hiicon hiicon-undo hiicon-spin-reverse text-primary" style="font-size:30px;margin-right:30px;"></span>
    <span class="hiicon hiicon-sync hiicon-spin text-primary" style="font-size:30px;"></span>
</div>
            <h3 class="site-title">Color 主题颜色<a name="color">#</a></h3>
            <div class="site-info">
    <ol>
        <li>色彩应与产品定位相匹配，且符合用户心理认知；</li>
        <li>视觉层次应清晰分明，为重要行动点或关键信息定义一个主色，并建立视觉连续性；</li>
    </ol>
    <p>背景色</p>
    <div class="site-mask-white bg-default">背景色</div>
    <p>功能颜色</p>
    <div class="site-mask-white text-primary">主题色</div>
    <div class="site-mask-white bg-primary">主题背景色</div>
    <div class="site-mask-white text-info">消息色</div>
    <div class="site-mask-white bg-info">消息背景色</div>
    <div class="site-mask-white text-success">成功色</div>
    <div class="site-mask-white bg-success">成功背景色</div>
    <div class="site-mask-white text-warning">警告色</div>
    <div class="site-mask-white bg-warning">警告背景色</div>
    <div class="site-mask-white text-danger">失败色</div>
    <div class="site-mask-white bg-danger">失败背景色</div>
    <p>链接颜色</p>
    <div class="site-mask-white site-link">链接色</div>
    <div class="site-mask-white site-link-hover">链接hover色</div>
    <div class="site-mask-white site-link-active">链接click色</div>
    <p>标题和文本颜色</p>
    <div class="site-mask-white site-text-title">标题色</div>
    <div class="site-mask-white site-text">文本色</div>
    <div class="site-mask-white site-text-secondary">次文本色</div>
    <div class="site-mask-white" style="color: #bfbfbf;">禁用</div>
    <p>其他</p>
    <div class="site-mask-white site-border">边框色</div>
    <div class="site-mask-white bg-primary site-border-radius">圆角</div>
    <div class="site-mask-white bg-primary site-box-shadow">阴影</div>
</div>
            <h3 class="site-title">Button 按钮<a name="button">#</a></h3>
            <div class="site-info">
    <p>实心按钮</p>
    <button class="btn">默认按钮</button>
    <button class="btn btn-primary">主题按钮</button>
    <button class="btn btn-info">消息按钮</button>
    <button class="btn btn-success">成功按钮</button>
    <button class="btn btn-warning">警告按钮</button>
    <button class="btn btn-danger">失败按钮</button>
    <button class="btn btn-primary" disabled>禁用按钮</button>
    <button class="btn btn-disabled">禁用按钮</button>
    <button class="btn btn-link">链接按钮</button>
    <p>链接按钮</p>
    <a href="javascript:;" class="btn">默认链接按钮</a>
    <a href="javascript:;" class="btn btn-primary">主题链接按钮</a>
    <a href="javascript:;" class="btn btn-info">消息链接按钮</a>
    <a href="javascript:;" class="btn btn-success">成功链接按钮</a>
    <a href="javascript:;" class="btn btn-warning">警告链接按钮</a>
    <a href="javascript:;" class="btn btn-danger">失败链接按钮</a>
    <a href="javascript:;" class="btn btn-primary" disabled>禁用链接按钮</a>
    <a href="javascript:;" class="btn btn-disabled">禁用链接按钮</a>
    <p>空心按钮</p>
    <button class="btn">默认按钮</button>
    <button class="btn btn-primary-outline">主题按钮</button>
    <button class="btn btn-info-outline">消息按钮</button>
    <button class="btn btn-success-outline">成功按钮</button>
    <button class="btn btn-warning-outline">警告按钮</button>
    <button class="btn btn-primary" disabled>禁用按钮</button>
    <button class="btn btn-disabled">禁用按钮</button>
    <p>椭圆按钮</p>
    <button class="btn btn-round">默认按钮</button>
    <button class="btn btn-primary btn-round">主题按钮</button>
    <button class="btn btn-info btn-round">消息按钮</button>
    <button class="btn btn-success btn-round">成功按钮</button>
    <button class="btn btn-warning btn-round">警告按钮</button>
    <button class="btn btn-primary btn-round btn-disabled">禁用按钮</button>
    <br><br>
    <button class="btn btn-round">默认按钮</button>
    <button class="btn btn-primary-outline btn-round">主题按钮</button>
    <button class="btn btn-info-outline btn-round">消息按钮</button>
    <button class="btn btn-success-outline btn-round">成功按钮</button>
    <button class="btn btn-warning-outline btn-round">警告按钮</button>
    <button class="btn btn-primary btn-round" disabled>禁用按钮</button>
    <p>圆角按钮</p>
    <button class="btn btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-primary btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-info btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-success btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-warning btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-primary btn-circle btn-disabled"><i class="hiicon hiicon-upload"></i></button>
    <br><br>
    <button class="btn btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-primary-outline btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-info-outline btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-success-outline btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-warning-outline btn-circle"><i class="hiicon hiicon-upload"></i></button>
    <button class="btn btn-primary btn-circle" disabled><i class="hiicon hiicon-upload"></i></button>
    <p>按钮组</p>
    <div class="btn-group">
        <button class="btn btn-primary"><i class="hiicon hiicon-up"></i></button>
        <button class="btn"><i class="hiicon hiicon-right"></i></button>
        <button class="btn"><i class="hiicon hiicon-down"></i></button>
        <button class="btn"><i class="hiicon hiicon-left"></i></button>
    </div><br />
    <div class="btn-group btn-group-horizontal">
        <button class="btn btn-primary"><i class="hiicon hiicon-up"></i></button>
        <button class="btn"><i class="hiicon hiicon-right"></i></button>
        <button class="btn"><i class="hiicon hiicon-down"></i></button>
        <button class="btn"><i class="hiicon hiicon-left"></i></button>
    </div><br />
    <div class="btn-group btn-group-vertical">
        <button class="btn btn-primary"><i class="hiicon hiicon-up"></i></button>
        <button class="btn"><i class="hiicon hiicon-right"></i></button>
        <button class="btn"><i class="hiicon hiicon-down"></i></button>
        <button class="btn"><i class="hiicon hiicon-left"></i></button>
    </div>
    <p>图标按钮</p>
    <button class="btn btn-primary btn-circle">
        <i class="hiicon hiicon-search"></i>
    </button>
    <button class="btn btn-primary">
        <i class="hiicon hiicon-search"></i>
        Primary
    </button>
    <button class="btn btn-success">
        <i class="hiicon hiicon-download"></i>
        Primary
    </button>
    <p>加载图标</p>
    <button class="btn btn-primary btn-circle btn-disabled">
        <i class="hiicon hiicon-reload hiicon-spin"></i>
    </button>
    <button class="btn btn-primary btn-disabled">
        <i class="hiicon hiicon-reload hiicon-spin"></i>
        登录中...
    </button>
    <button class="btn btn-primary btn-disabled">
        <i class="hiicon  hiicon-setting hiicon-spin"></i>
        设置中...
    </button>
    <p>块级按钮</p>
    <button class="btn btn-primary btn-block">块级主题按钮</button>
    <button class="btn btn-info btn-block">块级消息按钮</button>
    <button class="btn btn-success btn-block">块级成功按钮</button>
    <button class="btn btn-danger-outline btn-block">块级失败按钮</button>
</div>
            <h3 class="site-title">Link 链接<a name="link">#</a></h3>
            <div class="site-info">
                <p>基础用法</p>
                <a href="javascript:;">默认链接</a>
                <a href="javascript:;" class="link-primary">主要链接</a>
                <a href="javascript:;" class="link-info">信息链接</a>
                <a href="javascript:;" class="link-success">成功链接</a>
                <a href="javascript:;" class="link-warning">警告链接</a>
                <a href="javascript:;" class="link-danger">危险链接</a>
                <p>下划线</p>
                <a href="javascript:;" class="link-underline">默认链接</a>
                <a href="javascript:;" class="link-primary link-underline">主要链接</a>
                <a href="javascript:;" class="link-info link-underline">信息链接</a>
                <a href="javascript:;" class="link-success link-underline">成功链接</a>
                <a href="javascript:;" class="link-warning link-underline">警告链接</a>
                <a href="javascript:;" class="link-danger link-underline">危险链接</a>
                <p>禁用</p>
                <a href="javascript:;" class="link-disabled">默认链接</a>
                <a href="javascript:;" class="link-primary link-disabled">主要链接</a>
                <a href="javascript:;" class="link-info link-disabled">信息链接</a>
                <a href="javascript:;" class="link-success link-disabled">成功链接</a>
                <a href="javascript:;" class="link-warning link-disabled">警告链接</a>
                <a href="javascript:;" class="link-danger link-disabled">危险链接</a>
            </div>
            <h3 class="site-title">Animation 动画<a name="animation">#</a></h3>
            <h4 class="site-subtitle">1. 基础动画</h4>
<div class="site-info">
    <div class="list-box">
        
        
        <div class="box-item" data-animation="bounce">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounce
            </div>
        </div>
        
        <div class="box-item" data-animation="flip">
            <div class="box-title">动画</div>
            <div class="box-text">
                flip
            </div>
        </div>
        
        <div class="box-item" data-animation="flash">
            <div class="box-title">动画</div>
            <div class="box-text">
                flash
            </div>
        </div>
        
        <div class="box-item" data-animation="shake">
            <div class="box-title">动画</div>
            <div class="box-text">
                shake
            </div>
        </div>
        
        <div class="box-item" data-animation="swing">
            <div class="box-title">动画</div>
            <div class="box-text">
                swing
            </div>
        </div>
        
        <div class="box-item" data-animation="wobble">
            <div class="box-title">动画</div>
            <div class="box-text">
                wobble
            </div>
        </div>
        
        <div class="box-item" data-animation="ring">
            <div class="box-title">动画</div>
            <div class="box-text">
                ring
            </div>
        </div>
        
        <div class="box-item" data-animation="fadein">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadein
            </div>
        </div>
        
        <div class="box-item" data-animation="fadeinT">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadeinT
            </div>
        </div>
        
        <div class="box-item" data-animation="fadeinR">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadeinR
            </div>
        </div>
        
        <div class="box-item" data-animation="fadeinB">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadeinB
            </div>
        </div>
        
        <div class="box-item" data-animation="fadeinL">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadeinL
            </div>
        </div>
        
        <div class="box-item" data-animation="bouncein">
            <div class="box-title">动画</div>
            <div class="box-text">
                bouncein
            </div>
        </div>
        
        <div class="box-item" data-animation="bounceinT">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounceinT
            </div>
        </div>
        
        <div class="box-item" data-animation="bounceinR">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounceinR
            </div>
        </div>
        
        <div class="box-item" data-animation="bounceinB">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounceinB
            </div>
        </div>
        
        <div class="box-item" data-animation="bounceinL">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounceinL
            </div>
        </div>
        
        <div class="box-item" data-animation="rotatein">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotatein
            </div>
        </div>
        
        <div class="box-item" data-animation="rotateinLT">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotateinLT
            </div>
        </div>
        
        <div class="box-item" data-animation="rotateinLB">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotateinLB
            </div>
        </div>
        
        <div class="box-item" data-animation="rotateinRT">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotateinRT
            </div>
        </div>
        
        <div class="box-item" data-animation="rotateinRB">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotateinRB
            </div>
        </div>
        
        <div class="box-item" data-animation="flipin">
            <div class="box-title">动画</div>
            <div class="box-text">
                flipin
            </div>
        </div>
        
        <div class="box-item" data-animation="flipinX">
            <div class="box-title">动画</div>
            <div class="box-text">
                flipinX
            </div>
        </div>
        
        <div class="box-item" data-animation="flipinY">
            <div class="box-title">动画</div>
            <div class="box-text">
                flipinY
            </div>
        </div>
        
        <div class="box-item" data-animation="fadeout">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadeout
            </div>
        </div>
        
        <div class="box-item" data-animation="fadeoutT">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadeoutT
            </div>
        </div>
        
        <div class="box-item" data-animation="fadeoutR">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadeoutR
            </div>
        </div>
        
        <div class="box-item" data-animation="fadeoutB">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadeoutB
            </div>
        </div>
        
        <div class="box-item" data-animation="fadeoutL">
            <div class="box-title">动画</div>
            <div class="box-text">
                fadeoutL
            </div>
        </div>
        
        <div class="box-item" data-animation="bounceout">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounceout
            </div>
        </div>
        
        <div class="box-item" data-animation="bounceoutT">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounceoutT
            </div>
        </div>
        
        <div class="box-item" data-animation="bounceoutR">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounceoutR
            </div>
        </div>
        
        <div class="box-item" data-animation="bounceoutB">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounceoutB
            </div>
        </div>
        
        <div class="box-item" data-animation="bounceoutL">
            <div class="box-title">动画</div>
            <div class="box-text">
                bounceoutL
            </div>
        </div>
        
        <div class="box-item" data-animation="rotateout">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotateout
            </div>
        </div>
        
        <div class="box-item" data-animation="rotateoutLT">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotateoutLT
            </div>
        </div>
        
        <div class="box-item" data-animation="rotateoutLB">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotateoutLB
            </div>
        </div>
        
        <div class="box-item" data-animation="rotateoutRT">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotateoutRT
            </div>
        </div>
        
        <div class="box-item" data-animation="rotateoutRB">
            <div class="box-title">动画</div>
            <div class="box-text">
                rotateoutRB
            </div>
        </div>
        
        <div class="box-item" data-animation="flipout">
            <div class="box-title">动画</div>
            <div class="box-text">
                flipout
            </div>
        </div>
        
        <div class="box-item" data-animation="flipoutX">
            <div class="box-title">动画</div>
            <div class="box-text">
                flipoutX
            </div>
        </div>
        
        <div class="box-item" data-animation="flipoutY">
            <div class="box-title">动画</div>
            <div class="box-text">
                flipoutY
            </div>
        </div>
        
    </div>
</div>
            <h3 class="site-title">纯CSS Loading动画<a name="loading">#</a></h3>
            <div class="site-info">
    <div class="loaders">
        <div class="loader">
            <div class="loader-inner ball-pulse">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-grid-pulse">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-clip-rotate">
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-clip-rotate-pulse">
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner square-spin">
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-clip-rotate-multiple">
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-pulse-rise">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-rotate">
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner cube-transition">
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-zig-zag">
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-zig-zag-deflect">
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-triangle-path">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-scale">
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner line-scale">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner line-scale-party">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-scale-multiple">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-pulse-sync">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-beat">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner line-scale-pulse-out">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner line-scale-pulse-out-rapid">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-scale-ripple">
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-scale-ripple-multiple">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-spin-fade-loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner line-spin-fade-loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner triangle-skew-spin">
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner pacman">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner ball-grid-beat">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="loader">
            <div class="loader-inner semi-circle-spin">
                <div></div>
            </div>
        </div>
    </div>
</div>
            <h3 class="site-title">Assist 辅助<a name="assist">#</a></h3>
            <h4 class="site-subtitle">1. 文档布局</h4>
            <div class="site-info">
                 <table class="site-table">
                    <tbody>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    向右浮动<code>.pull-right</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    向左浮动<code>.pull-left</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    清除浮动<code>.clearfix</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本左对齐<code>.text-left</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本右对齐<code>.text-right</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本居中对齐<code>.text-center</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本单行截取<code>.text-cut</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    隐藏<code>.hide</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    显示<code>.show</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    文本色 <code>.text-${type}</code>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="table-cell">
                                    背景色 <code>.bg-${type}</code>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="site-footer">
    <ul class="site-nav">
        <li class="site-nav-item">
            <a class="site-nav-link">案例</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">联系</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">GitHub</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">码云</a>
        </li>
        <li class="site-nav-item">
            <a class="site-nav-link">微信公众号</a>
        </li>
    </ul>
    <p class="copyright">© 2018 <a href="/">http://www.hiui.com</a> MIT license</p>
</div>

        </div>
    </div>
    <script type="text/javascript" src="../../scripts/vendor.js"></script>
    <script type="text/javascript" src="../../scripts/site.js"></script>
</body>

</html>